@import './mixins/mixins.scss';
@import './common/var.scss';

@include b(button-group){
  display: inline-block;

  .ml-button{
    margin-left: 0;

    //  border-radius
    &:first-child{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(:first-child):not(:last-child){
      border-radius: 0;
    }
    &:last-child{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:first-child:last-child{
      border-radius: $--button-border-radius;
      &.is-round{
        border-radius: $--button-round-border-radius;
      }
      &.is-circle{
        border-radius: $--button-circle-border-radius;
      }
    }

    //  border
    &:first-child{
      border-right-color: rgba($--color-white,.5);
    }
    &:not(:first-child):not(:last-child){
      border-right-color: rgba($--color-white,.5);
      border-left-color: rgba($--color-white,.5);
    }
    &:last-child{
      border-left-color: rgba($--color-white,.5);
    }
    &:not(:last-child){
      margin-right: -1px;
    }
  }
}